<template>
  <ul class="my-tree" :class="'my-tree'+level">
    <template v-for="(item,index) in items">
      <li :class="['my-tree-item','my-tree-' + ((item.items ||[]).length ? 'div':'leaf'), 'my-tree-css-'+ (item.css || '') ]"
          :index="item.id">
        <div v-html="item.name"></div>
        <my-tree v-if="(item.items ||[]).length" :data="item.items" :level="level+1">

        </my-tree>
      </li>
    </template>
  </ul>
</template>
<script type="text/javascript">
  export default {
    name: 'my-tree',
    props: {
      data: {type: Array, default: []},
      level: {type: Number, default: 0}
    },

    data() {
      return {count: 0}
    },
    computed: {
      items() {
        return this.data;
      }
    },
    created() {

    },
    methods: {}
  }
</script>
<style>
  .my-tree {
    position: relative;
  }

  .my-tree-line {
    position: absolute;
    top: 0;
    width: 20px;
    z-index: 999;
    margin-left: -20px;
    /*
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>');
     */
  }


</style>
